<template>
  <div class="environment-company">
    <div class="environment-header">
      <zz-back class="left" name="环境监测" :title="$route.query.referName" style="padding: 0"></zz-back>
      <div class="right">
        <button class="button-line mr10" :class="{'choose-block': queryType === 1}" @click="chooseType(1)">每日记录</button>
        <button class="button-line mr10" :class="{'choose-block': queryType === 2}" @click="chooseType(2)">每周统计</button>
        <button class="button-line mr20" :class="{'choose-block': queryType === 3}" @click="chooseType(3)">每月统计</button>
        <span class="mr5">日期</span>
        <zz-date type="day" :place="dayPlace" :isToday = false :limit = 'limitDate' v-if="queryType === 1" @change="changeDayTime"></zz-date>
        <zz-select
          class="inline mr10"
          :border= true
          v-if="queryType === 2"
          :options="{width: '170px'}"
          :option="weekList"
          name = '本周'
          @optionClick="weekCallback"></zz-select>
        <zz-date type="year" :place="monthPlace" :isToday = false v-if="queryType === 3" @change="changeTime"></zz-date>
      </div>
    </div>
    <div style="background: #f8f9fb; padding: 20px 0">
      <div class="chart-item">
        <p class="chart-p">报警:<b class="chart-span">{{this.deviceDustWorkSum.alarmcount}}</b>次</p>
        <div style="width: 100%; height: 210px" ref="police"></div>
      </div>
      <div class="chart-item relative" v-if="queryType === 2 || queryType === 3">
        <p class="chart-p dust-p">日均报警:<b class="chart-span">{{deviceDustWorkSum.alarmavg}}</b>μg/m³</p>
        <div class="dust-line"></div>
        <div style="width: 100%; height: 255px" ref="alarmAvg"></div>
      </div>
      <div class="chart-item relative">
        <p class="chart-p dust-p" v-if="deviceDustWorkSum.tspavg">扬尘(TSP):<b class="chart-span">{{deviceDustWorkSum.tspavg}}</b>μg/m³</p>
        <p class="chart-p dust-p" v-else-if="deviceDustWorkSum.pmTenavg">扬尘(PM10):<b class="chart-span">{{deviceDustWorkSum.pmTenavg}}</b>μg/m³</p>
        <p class="chart-p dust-p" v-else="deviceDustWorkSum.pmTwoPointFiveavg">扬尘(PM2.5):<b class="chart-span">{{deviceDustWorkSum.pmTwoPointFiveavg}}</b>μg/m³</p>
        <div class="dust-line"></div>
        <div style="width: 100%; height: 255px" ref="dust"></div>
      </div>
      <div class="chart-item">
        <p class="chart-p">噪音:<b class="chart-span">{{deviceDustWorkSum.noiseavg}}</b>(dB)</p>
        <div style="width: 100%; height: 210px" ref="noise"></div>
      </div>
      <div class="chart-item">
        <p class="chart-p">温度:<b class="chart-span">{{deviceDustWorkSum.tempavg}}</b>℃</p>
        <div style="width: 100%; height: 210px"  ref="tempreature"></div>
      </div>
      <div class="chart-item">
        <p class="chart-p">风速:<b class="chart-span">{{deviceDustWorkSum.windspeedavg}}</b>m/s</p>
        <div style="width: 100%; height: 210px"  ref="wind"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import dustDetail from './dustDetail.js'
  import noiseLine from './noiseLine.js'
  import tempreature from './tempreature.js'
  import alarmAvg from './alarmAvg.js'
  import wind from './wind.js'
  import police from './police.js'
  import { getDeviceDustWorkSum } from '@/service/api.js'
  export default {
    name: 'project',
    data () {
      return {
        startDate: '',
        title: '',
        dayPlace: '',
        monthPlace: '',
        endDate: '',
        queryType: 1,
        week: [],
        limitDate: [],
        weekCopy: [
          {day: 1, value: '周一'},
          {day: 2, value: '周二'},
          {day: 3, value: '周三'},
          {day: 4, value: '周四'},
          {day: 5, value: '周五'},
          {day: 6, value: '周六'},
          {day: 0, value: '周日'}],
        weekMap: new Map(),
        days: [],
        weekList: {
          1: '本周',
          2: '上周'
        },
        stageData: {},
        deviceDustWorkSum: {}
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    mixins: [dustDetail, noiseLine, police, tempreature, wind, alarmAvg],
    mounted () {
      this.chooseType(this.queryType)
      this.limitDate = [{
        type: 'fromto',
        to: this.$moment().add(1, 'days').format('YYYY-MM-DD')
      }]
      this.dayPlace = this.$moment().format('YYYY-MM-DD')
      this.monthPlace = this.$moment().format('YYYY-MM')
    },
    methods: {
      initWeek () {
        if (this.queryType === 3) {
          this.week = []
          let month = Number.parseInt(this.$moment().daysInMonth())
          for (let i = 1; i <= month; i++) {
            this.week.push({day: 1, value: `${i}日`})
            this.weekMap.set(i, 0)
          }
        } else {
          this.week.forEach(item => {
            this.weekMap.set(item.day, 0)
          })
        }
      },
      weekCallback (payload) {
        let key = Number.parseInt(payload.key)
        this.week = this.weekCopy
        switch (key) {
          case 1:
            this.startDate = this.$moment().subtract(7, 'days').format('YYYY-MM-DD')
            this.endDate = this.$moment().format('YYYY-MM-DD')
            break
          case 2:
            this.startDate = this.$moment().subtract(14, 'days').format('YYYY-MM-DD')
            this.endDate = this.$moment().subtract(7, 'days').format('YYYY-MM-DD')
            break
        }
        this.deviceDustWorkSumPromise()
      },
      getDeviceDustWorkSumQuery () {
        return new Promise(resolve => {
          getDeviceDustWorkSum({
            projectId: this.$route.query.projectId,
            referId: this.$route.query.referId,
            type: this.queryType,
            startTime: this.startDate,
            endTime: this.endDate
          }).then( res => {
            this.tspList = []
            this.stageData = []
            this.pmTenList = []
            this.pmTwoPointFiveList = []
            if (res.data.totalDate) {
              this.deviceDustWorkSum = {...this.deviceDustWorkSum, ...res.data.totalDate}
              this.stageData = res.data.stageData
              this.days = this.week.map(item => item.value)
            } else {
              this.deviceDustWorkSum = res.data
              if (this.deviceDustWorkSum.dust) {
                this.days = this.deviceDustWorkSum.dust.tsp.map(item => item.time)
                this.tspList = this.deviceDustWorkSum.dust.tsp
                this.pmTenList = this.deviceDustWorkSum.dust.pmTen
                this.pmTwoPointFiveList = this.deviceDustWorkSum.dust.pmTwoPointFive
              }
            }
            resolve()
          }).catch( err => {
            console.log(err)
          })
        })
      },
      deviceDustWorkSumPromise () {
        this.getDeviceDustWorkSumQuery().then(() => {
          if (this.queryType === 2 || this.queryType === 3) {
            this.initAlarmAvg()
            this.tspList = this.initWeekData(this.tspList, 'noiseavg')
            this.pmTenList = this.initWeekData(this.pmTenList, 'pmTenavg')
            this.pmTwoPointFiveList = this.initWeekData(this.pmTwoPointFiveList, 'pmTwoPointFiveavg')
            this.deviceDustWorkSum.noise = this.initWeekData(this.deviceDustWorkSum.noise, 'noiseavg')
            this.deviceDustWorkSum.temp = this.initWeekData(this.deviceDustWorkSum.temp, 'tempavg')
            this.deviceDustWorkSum.windspeed = this.initWeekData(this.deviceDustWorkSum.windspeed, 'windspeedavg')
          }
          this.initWarningSource()
          this.initNoise()
          this.initTemperature()
          this.initWind()
          this.initDust()
        })
      },
      initWeekData (list, key) {
        this.initWeek()
        this.stageData.forEach(item => {
          this.weekMap.set(Number.parseInt(item.day), {value: item[key]})
        })
        return [...this.weekMap.values()]
      },
      changeDayTime (value) {
        this.startDate = value
        this.endDate = value
        this.deviceDustWorkSumPromise()
      },
      changeTime (value) {
        this.time = value
        this.chooseType(3)
      },
      chooseType (type) {
        this.queryType = type
        switch (type) {
          case 1:
            this.time = ''
            this.startDate = this.$moment().format('YYYY-MM-DD')
            this.endDate = this.$moment().format('YYYY-MM-DD')
            break
          case 2:
            this.time = ''
            this.week = this.weekCopy
            this.startDate = this.$moment().startOf('week').format('YYYY-MM-DD')
            this.endDate = this.$moment().endOf('week').format('YYYY-MM-DD')
            break
          case 3:
            this.startDate = this.$moment().startOf('month').format('YYYY-MM-DD')
            this.endDate = this.$moment().endOf('month').format('YYYY-MM-DD')
            if (this.time) {
              this.startDate = this.$moment(this.time).startOf('month').format('YYYY-MM-DD')
              this.endDate = this.$moment(this.time).endOf('month').format('YYYY-MM-DD')
            }
            this.initWeek()
            break
        }
        this.deviceDustWorkSumPromise()
      }
    }
  }
</script>

<style scoped lang='scss'>
  .environment-company{
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
    .content-header{
      height: 60px;
      padding: 20px 20px 10px 20px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .choose-block {
      border: 1px solid #22a6b5;
      background: #22a6b5;
      color: #fff;
      height: 30px;
      box-sizing: border-box;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 0;
      vertical-align: top;
    }
    .chart-item{
      width: 50%;
      height: 290px;
      background: #fff;
      margin: 0 auto 20px auto;
      padding: 20px 20px 10px 20px;
      box-sizing: border-box;
      .dust-line{
        width: calc(100% - 40px);
        height: 1px;
        background: $color-line;
        position: absolute;
        top: 55px;
      }
      .chart-p{
        font-size: 16px;
        color: $color-grid;
        padding-bottom: 20px;
        border-bottom: 1px $color-line solid;
        .chart-span{
          color: #333333;
          font-size: 18px;
          margin: 0 7px;
        }
      }
      .dust-p{
        position: absolute;
        top: 15px;
        border-bottom: none;
      }
    }
  }
</style>
